<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" th:href="@{css/bootstrap4.6.2.css}">
    <script th:src="@{js/jquery-3.3.1.slim.min.js}"></script>
    <script th:src="@{js/bootstrap.min.js}"></script>
    <style>
        .container {
            position: relative !important;
        }

        .info-img {
            width: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <!--上传文件-->
    <form action="/upload" enctype="multipart/form-data" method="post">
        <div class="form-group">
            <label for="exampleFormControlFile1">Example file input</label>
            <!--multiple 可以上传多个文件-->
            <input type="file" class="form-control-file" id="exampleFormControlFile1" name="file" multiple>
        </div>
        <button type="submit" class="btn btn-primary mb-2">上传</button>
    </form>
    <button>新增</button>
    <!--条件查询-->
    <form class="form-inline" action="/listPage">
        <div class="form-group mb-2">
            <label for="username" class="">用户名:</label>
            <input type="text" class="form-control" id="username" name="name" th:value="${condition.name}">
        </div>
        <div class="form-group mx-sm-3 mb-2">
            <label for="birthday" class="">出生日期：</label>
            <input type="date" class="form-control" id="birthday" placeholder="birthday" name="birth"
                   th:value="${condition.birth}">
        </div>
        <div class="form-group mx-sm-3 mb-2">
            <label class="">性别：</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="inlineRadio1"
                       value="男" th:checked="${condition.gender == '男' ? true : false}">
                <label class="form-check-label" for="inlineRadio1">男</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="inlineRadio2"
                       value="女">
                <label class="form-check-label" for="inlineRadio2"
                       th:checked="${condition.gender == '女' ? true : false}">女</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary mb-2">查询</button>
    </form>


    <!--学生信息-->
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">姓名</th>
            <th scope="col">出生日期</th>
            <th scope="col">性别</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <!--    list 存储在request中的数据  session.list(存储在session中)-->
        <tr th:each="student :${page.data}">
            <th scope="row" th:text="${student.id}"></th>
            <td th:text="${student.name}"></td>
            <td th:text="${student.birth}"></td>
            <td th:text="${student.gender}"></td>
            <td>
                <a href="">删除</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                        th:data-whatever="${student.id}">修改
                </button>
            </td>
        </tr>
        </tbody>
    </table>

    <!--修改用户信息-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/edit" method="post">
                        <div class="form-group">
                            <!--                            <label for="id" class="col-form-label">学生编号:</label>-->
                            <input type="text" class="form-control" id="id" name="id" hidden>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-form-label">学生姓名:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="gender" class="col-form-label">学生性别:</label>
                            <input type="text" class="form-control" id="gender" name="gender">
                        </div>
                        <div class="form-group">
                            <label for="birth" class="col-form-label">出生日期:</label>
                            <input type="date" class="form-control" id="birth" name="birth">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <!--分页-->
    <nav aria-label="...">
        <ul class="pagination justify-content-center">
            <li class="page-item">共<span th:text="${page.total}"></span>条</li>
            <li th:class="${page.hasPrev ? 'page-item' : 'page-item disabled'} ">
                <a class="page-link"
                   th:href="@{/listPage(pageNum=${page.prevNum},name=${condition.name},birth=${condition.birth},gender=${condition.gender})}">Previous</a>
            </li>
            <li th:class="${num==page.pageNum ? 'page-item active' : 'page-item'}"
                th:each="num : ${page.pageNumbers}">
                <a class="page-link"
                   th:href="@{/listPage(pageNum=${num},name=${condition.name},birth=${condition.birth},gender=${condition.gender})}"
                   th:text="${num}"></a></li>
            <li th:class="${page.hasNext ? 'page-item' : 'page-item disabled'}">
                <a class="page-link"
                   th:href="@{/listPage(pageNum=${page.nextNum},name=${condition.name},birth=${condition.birth},gender=${condition.gender})}">Next</a>
            </li>
            <li class="page-item">共<span th:text="${page.pageCount}"></span>页</li>
        </ul>

    </nav>
    <!--获取每一行的id并设置到input框中-->
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget)
            let id = button.data('whatever')
            let modal = $(this)
            modal.find('#id').val(id)
        })
    </script>
    <!--修改成功与否的弹出框-->
    <!--<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">-->
    <div class="toast" style="position: absolute; top: 0; right: 0;width: 200px;" id="message-info" data-delay="3000">
        <div class="toast-header">
            <img th:src="@{imgs/logo.png}" class="rounded mr-2 info-img" alt="...">
            <strong class="mr-auto">开发喵</strong>
            <small>刚刚</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            [(${msg})]
            <!--Hello, world! This is a toast message.-->
        </div>
    </div>
    <script th:inline="javascript">
        let msg = [[${msg}]]
        if (msg) {
            // 让弹窗显示
            $('#message-info').toast('show');
        }
    </script>
</div>
</body>
</html>